// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) UXBOX Labs SL

.color-palette {
  @include animation(0, 0.3s, fadeInUp);
  align-items: center;
  background-color: $color-gray-50;
  border-top: 1px solid $color-gray-60;

  display: grid;
  grid-template-columns: auto auto 1fr auto auto;

  z-index: 11;

  & .right-arrow,
  & .left-arrow {
    cursor: pointer;

    svg {
      fill: $color-gray-20;
      height: 1rem;
      margin: 0 0.5rem;
      width: 1rem;
    }

    &:hover {
      svg {
        fill: $color-gray-30;
      }
    }
    &.disabled {
      display: none;
    }
  }

  .left-arrow {
    transform: rotate(180deg);
    padding-top: 10px;
  }

  &.fade-out-down {
    @include animation(0, 0.3s, fadeOutDown);
  }

  & .context-menu-items {
    bottom: 1.5rem;
    top: initial;
    min-width: 10rem;
  }

  & .resize-area {
    position: absolute;
    height: 8px;
    width: 100%;
    z-index: 10;
    cursor: ns-resize;
    top: 0;
    left: 0;
  }
}

.color-palette-actions {
  align-self: stretch;
  border: 1px solid #1f1f1f;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  margin-right: 0.5rem;
  padding: 0.5rem;

  .color-palette-buttons {
    align-items: center;
    display: flex;
    justify-content: space-around;
  }
}

.color-palette-actions-button {
  cursor: pointer;
  display: flex;
  & svg {
    width: 1rem;
    height: 1rem;
    fill: #afb2bf;
  }
}

.btn-palette {
  align-items: center;
  border: 2px solid $color-gray-10;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  padding: 0.6rem;
  svg {
    fill: $color-gray-10;
    height: 20px;
    width: 20px;
  }
  &:hover {
    border-color: $color-gray-40;
    svg {
      fill: $color-gray-40;
    }
  }
  &.current {
    background-color: $color-primary;
    border-color: $color-white;
    svg {
      fill: $color-white;
    }
  }
}

.color-palette-content {
  align-items: center;
  display: flex;
  overflow: hidden;
  width: 100%;
  padding: 0.25rem;
  height: 100%;

  &.size-small {
    height: 3.5rem;
  }
}

.color-palette-inside {
  position: relative;
  align-items: center;
  display: flex;
  transition: all 0.6s ease;
  width: 100%;
  scroll-behavior: smooth;
  height: 100%;
}

.color-cell {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;

  .color-text {
    color: $color-gray-20;
    font-size: $fs12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 65px;
    text-align: center;
    margin-top: 0.25rem;

    .no-text & {
      display: none;
    }
  }

  &.current {
    .color-text {
      color: $color-gray-50;
      font-weight: bold;
    }
    &::before {
      background-color: $color-gray-50;
      border-radius: 3px;
      color: $color-white;
      content: "selected";
      font-size: $fs10;
      left: 12px;
      padding: 1px 4px;
      position: absolute;
      top: 38px;
    }
  }
  &:hover {
    .color {
      border-color: $color-gray-50;
    }
    .color-text {
      color: $color-primary;
    }
  }
  &.add-color {
    margin-left: 1.5rem;

    .color-text {
      font-weight: bold;
    }
    &:hover {
      .color-text {
        color: $color-gray-40;
      }
    }
  }
}

.close-palette {
  align-self: flex-start;
  cursor: pointer;
  flex-shrink: 0;
  svg {
    fill: $color-gray-20;
    height: 25px;
    transform: rotate(45deg);
    width: 25px;
  }
  &:hover {
    svg {
      fill: $color-danger;
    }
  }
}

.color-tooltip {
  background-color: $color-gray-50;
  border: 1px solid $color-gray-10;
  border-radius: 3px;
  left: -102px;
  padding: 1rem;
  position: absolute;
  top: -85%;
  z-index: 11;
  .row-flex {
    position: relative;
    .input-text {
      font-size: $fs12;
      margin: 0 0.5rem;
      max-width: 100px;
    }
    &::after {
      background-color: $color-gray-50;
      bottom: -32px;
      border-bottom: 1px solid $color-gray-10;
      border-right: 1px solid $color-gray-10;
      content: "";
      height: 20px;
      left: 105px;
      position: absolute;
      transform: rotate(45deg);
      width: 20px;
    }
  }
}

ul.palette-menu {
  left: 8px;
  top: auto;
  bottom: var(--height);
  color: $color-black;

  li {
    position: relative;
    padding: 5px 1.5rem;
  }

  hr {
    margin: 0.5rem 0;
  }

  svg {
    width: 9px;
    height: 9px;
    position: absolute;
    left: 0.5rem;
    top: 10px;
  }

  hr {
    border-color: $color-gray-20;
  }

  .palette-library {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .color-sample {
    display: flex;
    flex-direction: row;
    margin-top: 0.5rem;
  }
}
